<!-- 第二版材料消耗 -->
<template>
	<view class="work_container">
		<view class="material-contianer">
			<view class="material-box">
				<view class="m-i-box" v-for="(item, index) in rowBox" :key="index">
					<view class="i-t-name top">
						<view>材料{{index + 1}}</view>
						<view class="btn" @click="delColumn(index)">
							<u-button text="删除" type="error" size="small"></u-button>
						</view>
					</view>
					<view class="i-t-name" @click="selectName(index)">
						<view class="require-red">材料名称</view>
						<view class="right">
							<view :class="item.processName ? 'r-v' : 'r-v opcity'">
								{{ item.processName ? item.processName : '请选择材料名称' }}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="i-t-name" @click="openConfirm(index)">
						<view class="require-red">规格型号</view>
						<view class="right">
							<view :class="item.model ? 'r-v' : 'r-v opcity'">
								{{ item.model ? item.model : '请选择规格型号' }}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="i-t-name bottom">
						<view class="require-red" style="width:400rpx">消耗量</view>
						<view class="right">
							<view class="r-v">
								<view style="display: flex;align-items: center;">
									<!-- #ifdef APP-PLUS || H5 -->
									<u-input type="number" v-model="item.shelfLife"
										@input="item.shelfLife = item.shelfLife.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
										placeholder="请输入" border="none"
										inputAlign="right"></u-input>
									<!-- #endif -->
									<!-- #ifdef MP-WEIXIN -->
									
									<u-input type="digit" v-model="item.shelfLife"
										@input="item.shelfLife = item.shelfLife.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
										placeholder="请输入" border="none"
										inputAlign="right"></u-input>
									<!-- #endif -->
									<text style="margin-left: 10px;">{{ item.unit }}</text>
								</view>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view style="margin: 0 20rpx;" @click="addColumn">
				<view class="plain-btn">
					<view style="margin: auto;display: flex;align-items: center;">
						<u-icon name="plus" color="#2979ff"></u-icon>
						<text>添加材料明细</text>
					</view>
				</view>
			</view>
			<view v-if="isShowName">
				<u-picker :show="isShowName" ref="uPicker" :columns="modelList" keyName="model"
					@confirm="modelSure($event,index)" @cancel="isShowName = false">
				</u-picker>
			</view>
		</view>
		<!-- 材料名称选择器 -->
		<level-linkage :ref="`levelLinkage`" title="材料名称" :pickerValueDefault="pickerValueDefault" :allData="treeData"
			@onConfirm="onConfirm" themeColor='#007AFF'>
		</level-linkage>
	</view>
</template>


<script>
	import {
		mapMutations
	} from 'vuex'
	import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
	//工序列表
	import {
		deviceTypeGetListByNameByLike,
		getDeviceTypeAttributeList
	} from '@/api/comprehensive/comprehensive.js'
	import filterArray from "@/utils/filterArray.js"
	import mixins from '@/utils/mixins.js'


	export default {
		mixins: [mixins],
		components: {
			levelLinkage
		},
		props: {
			wrdObject: Object,
			default: () => ({})
		},
		data() {
			return {
				pickerValueDefault: [0, 0],
				pickerText: '',
				treeData: [],
				itemIndex: -1, // 当前点击选择器的下标
				type: '', // 进度填报工作量类型 1钢环 2微扰动
				isShowName: false,
				showMater: false,
				rowBox: [{
					processName: '', //材料名称
					model: '', //规格型号
					shelfLife: '', //消耗量
					unit: '',
					special: '', //唯一性
					count: 0
				}],
				rules: {},
				materialTreeList: [], //材料树形数据
				modelList: [], //材料型号数据
				materList: [], //材料名称数据
				finallyData: []
			}

		},
		onLoad() {

		},
		mounted() {

			this.getInterFaceData()
		},
		methods: {
			//获取接口的材料数据
			async getInterFaceData() {
				let _para = {
					ex1: "material",
					name: ''
				}
				let data_resp = await deviceTypeGetListByNameByLike(_para)
				let sourceData = data_resp.result
				let tempID2 = sourceData.filter(item => item.treeLevel == 1)[0].id
				let temp2 = sourceData.filter(item => item.treeLevel !== 1)
				this.treeData = filterArray(temp2, tempID2)
				// console.log(this.treeData, '树形数据前端处理')
				// 获取规格型号数据
				let model_resp = await getDeviceTypeAttributeList({
					currPage: 1,
					pageSize: 10000,
					params: {}
				})
				this.sumList = model_resp.result.list
			},



			//选择材料名称
			selectName(index) {
				this.itemIndex = index;
				this.$refs.levelLinkage.open();
			},

			// 添加按钮事件
			addColumn() {
				// this.modelList = []
				console.log(this.rowBox, '3333')
				for (let i = 0; i < this.rowBox.length; i++) {
					if (!this.rowBox[i].processName || !this.rowBox[i].model || !this.rowBox[i].shelfLife) {
						return uni.showToast({
							title: `请填写完整第${i  + 1}项的数据,并且消耗量需大于0`,
							icon: 'none'
						})
					}
				}
				this.rowBox.push({
					processName: '', //材料名称
					model: '', //规格型号
					shelfLife: '', //消耗量
					unit: '', //单位
					special: '',
					count: 0
				})

			},
			// 删除行按钮事件
			delColumn(index) {
				if (this.rowBox.length <= 1) {
					return uni.showToast({
						title: '至少保留一项',
						icon: 'none'
					})
				}
				this.rowBox.splice(index, 1);
			},
			/**
			 * 选择器的确定按钮
			 * 这里组件内部val的id为下标,不是数据库内的id
			 * @param {Object} val 
			 */
			onConfirm(val) {
				console.log(val, 'onConfirm')
				if (this.rowBox.isEdit) {
					this.rowBox[this.itemIndex].model = ''
					this.rowBox[this.itemIndex].shelfLife = ''
				}
				let temp_id = val.secondPick.id
				this.modelList = [this.sumList.filter(item => item.subDeviceTypeId === temp_id)]
				console.log(this.modelList, '型号数组');
				this.rowBox[this.itemIndex].processName = val.name; //绑定在input上
				this.rowBox[this.itemIndex].model = ""
				this.rowBox[this.itemIndex].shelfLife = ""
				this.rowBox[this.itemIndex].unit = ""
				this.rowBox[this.itemIndex].subDeviceTypeId = val.secondPick.id;
				this.rowBox[this.itemIndex].count = 1
				// console.log(this.rowBox[this.itemIndex].count,'有没有添加进去');
			},
			// 返回上一级
			goBack(url) {
				uni.switchTab({
					url: url
				})
			},
			modelSure(obj, index) {
				console.log(obj, index, '规格选择器确定事件')
				// this.itemIndex = index;
				this.rowBox[this.itemIndex].model = obj.value[0].model
				this.rowBox[this.itemIndex].modelId = obj.value[0].id
				this.rowBox[this.itemIndex].unit = obj.value[0].unit
				this.rowBox[this.itemIndex].deviceTypeName = obj.value[0].name
				this.rowBox[this.itemIndex].special = this.rowBox[this.itemIndex].processName + '-' + this.rowBox[this
					.itemIndex].model
				console.log(this.rowBox, '表格数据')
				this.isShowName = false
			},
			materSure() {

			},
			//型号选择器
			openConfirm(index) {
				this.itemIndex = index;
				// this.modelList = [this.sumList.filter(item => item.subDeviceTypeId === this.rowBox[index]
				// 	.subDeviceTypeId)]
				console.log(this.rowBox)
				// if(this.rowBox.isEdit) {
				this.modelList = [this.sumList.filter(item => item.subDeviceTypeId === this.rowBox[index].subDeviceTypeId)]
				// }
				console.log(`下标是${index}`)
				if (this.rowBox[index].processName === '') return uni.showToast({
					title: '请先选择材料名称!',
					icon: 'none'
				})
				this.isShowName = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 表单校验提示文字
	::v-deep.content .u-form .u-form-item .u-form-item__body__right__message {
		margin-left: 278rpx !important;
	}


	.work_container {
		height: 100%;
		width: 100%;

	}

	.item_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.top_reduce {
			// cursor: pointer;
			color: #16a7df;
		}
	}

	.content {
		padding: 35rpx;

		.value {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.value-nav {
			position: relative;

			.day {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
			}
		}

		.addArea {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			background: #F5F7FA;
			font-size: 32rpx;
			font-weight: bold;
			color: #445469;
			margin-top: 40rpx;
			text-align: center;
			margin-bottom: 40rpx;

			.image {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: -13rpx;
			}
		}
	}

	.little_count {
		margin-top: 30rpx;
		text-align: right;
		padding-right: 20rpx;
	}

	.btn_box {
		height: 100rpx;

		.btn_group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin-top: 100rpx;
			position: fixed;
			bottom: 0;
			width: 100%;

		}
	}

	.value2 {
		display: flex;
		align-items: center;
		text-align: right;

		.none {
			flex: 1;
		}

	}

	.value-nav {
		position: relative;

		.day {
			position: absolute;
			top: 10rpx;
			right: -50rpx;
		}
	}

	.footer {
		position: relative;
		width: 100%;

		// height: 100rpx;
		.image {
			position: absolute;
			bottom: 0rpx;
			right: 140rpx;
			width: 60rpx;
			height: 60rpx;
		}

		.select {
			position: absolute;
			bottom: 6rpx;
			right: 60rpx;
			font-size: 32rpx;
		}

		.num {
			position: absolute;
			bottom: 24rpx;
			right: 120rpx;
			padding: 5rpx 15rpx;
			border-radius: 30rpx;
			background-color: #f43530;
			color: #fff;
			z-index: 1;
		}
	}

	/deep/ .u-form-item__body__right__content__slot {
		flex-direction: column;
	}

	/deep/ .define-block {
		display: block;
	}

	/deep/ .u-upload__wrap {
		width: 85%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1;
	}

	.material-contianer {
		padding-bottom: 20rpx;
	}

	.material-box {
		margin: 0 20rpx 20rpx 20rpx;
		padding-top: 20rpx;

		.m-i-box {
			padding: 10rpx 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 5px;

			.i-t-name {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #ededed;
				padding: 28rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #586981;
				
				.require-red {
					/* #ifdef MP-WEIXIN */
						width: 200rpx;
					/* #endif */
				}
				.require-red::before {
					content: '*';
					color: red;
				}

				.btn {
					width: 130rpx;
				}

				.right {
					display: flex;
					align-items: center;

					.r-v {
						margin-right: 18rpx;
						
					}

					.r-v.opcity {
						opacity: .5;
					}
				}
			}

			.i-t-name.top {
				padding: 28rpx 10rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #445469;
			}

			.i-t-name.bottom {
				border: none
			}
		}
	}

	.plain-btn {
		display: flex;
		align-items: center;
		color: #3d89ed;
		background-color: #fff;
		padding: 20rpx 0;
		border-radius: 5px;
		margin-bottom: 10rpx;
	}


</style>